<template>
    <div class="show">
        <div class="top"></div>
        <div class="bottom">
            <!--配置多级菜单-->
            <div class="aside">
                <router-link class="menu" to="/component">动态组件</router-link>
                <router-link class="menu" to="/request">发送请求</router-link>
            </div>
            <div class="main">
                <!--路由视图： 将路由对应的组件变编译后的真实DOM直接挂载到这个区域-->
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "App",
        data(){
          return {
          }
        }
    }
</script>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    a {
        text-decoration: none;
        color: inherit;  /*超链接的颜色强制继承包含块的元素*/
    }
    .show {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    .show > .top {
        width: 100%;
        height: 60px;
        background: #2763d7;
    }
    .show > .bottom {
        width: 100vw;
        height: calc(100vh - 60px);
        background: #74d3ff;
        display: flex;
    }

    .show > .bottom > .aside {
        width: 200px;
        height: 100%;
        background: #333;
        padding-top: 50px;
    }

    .show > .bottom > .main {
        flex: 1;
        height: 100%;
        background: #e5f8eb;
    }
    .show > .bottom > .aside > .menu {
        display: block;
        font-size: 22px;
        text-align: center;
        height: 60px;
        line-height: 60px;
        color: #b0b0b0;
        border-bottom: 1px dotted #b0b0b0;
    }
    .show > .bottom > .aside> .menu:last-child {
        border: none;
    }
    .show > .bottom > .aside > .menu:hover {
        color: #fff;
    }

</style>